<template>
    <div class="box">
        <div class="timu">
            <slot></slot>
        </div>
        <div class="box1">
            <ul>
                <li v-for="(item,index) in err"
                :key="index"
                >
                    <div class="tu">
                        <img :src="item.avatarUrl "  :onerror="errorimg" alt="" >
                    </div>
                    <div class="pl">
                        <div class="mz">
                            <span>{{item.nick}}</span>
                            <img src="https://obj.pipi.cn/festatic/common/image/c853ef8e3cb69ad7bced9c38c39af045.png" alt="" >
                        </div>
                        <div class="xing">
                            <van-rate
                                v-model="value"
                                :size="10"
                                color="#ffd21e"
                                void-icon="star"
                                void-color="#eee"
                                />
                                <span>购票</span>
                        </div>
                        <div class="comment">
                            {{item.content}}
                        </div>
                        <div class="recovery">
                            <span>02-01</span>
                            <span>{{item.replyCount}} 回复</span>
                        </div>
                    </div>
                    <div class="Like">
                        <div>
                            <img src="//p1.meituan.net/scarlett/80f9c16d3e6ad90f7bc74cc4249b24151600.png@80q" alt="">
                            <span @click="item.upCount+=1 ">{{item.upCount}} </span>
                        </div>
                    </div>
                </li>
                
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    props:{
        err:[Array,Object]
    },
    data(){
        return{
             errorimg:'this.src="'+require('@/assets/images/dita.gif')+'"',//备用图片
            value:4
        }
    },
    methods:{
      
    }

    
}
</script>
<style lang="less" scoped>
    .box{
        width: 100%;
        padding: 10px 10px 10px  10px;
        margin-top: 10px;
        box-sizing: border-box;
        // border: 1px solid red;
        border-radius: 15px 15px 0 0;
        // height: 100px;
        background-color: white;
        .timu{
            font-size: 15px;
            color: #333;
            padding: 10px;
        }
        ul{
            width: 100%;
            box-sizing: border-box;
            padding: 5px 5px;

            li{
                &:nth-child(1){
                margin-top: 10px;
                
                }
                margin-top: 15px;
                .Like{
                    >div{
                        display: flex;
                        width: 100%;
                        text-align: center;
                        padding-left: 10px;
                        padding-top:6px;
                        padding-right: 10px;
                        box-sizing: border-box;
                        img{
                            width: 16px;
                            height: 16px;
                            // vertical-align: middle;
                        }
                        span{
                            display: block;
                            font-size: 13px;
                            margin-left: 5px;
                        }

                    }
                    // text-align: center;
                    color: #999;
                    position: absolute;
                    right: 0;
                    top: 0;
                    // width: 77px;
                    height: 26px;
                      border: 1px solid #ccc;
                    border-radius: 20px;
                    font-weight: 400;
                    // overflow: hidden;

                }
                position: relative;
                width: 100%;
                box-sizing: border-box;
                display: flex;
                // height: 300px;
                border-bottom: 1px solid #f0f0f0f0;
                padding-bottom: 10px;

                .tu{
                    
                    width: 34px;
                    height: 34px;
                    // border: 1px solid red;
                    border-radius: 50px;
                    overflow: hidden;
                    img{
                        width: 34px;
                        height: 34px;
                    }
                }
                .pl{
                    margin-left: 10px;
                    flex: 2;

                    .mz{
                        width: 100%;
                        overflow: hidden;
                        font-size: 15px;
                        color: #333;
                        img{
                            width: 36px;
                            height: 16px;
                            vertical-align: middle;
                            margin-left: 5px;
                        }
                    }
                    .xing{
                        margin-top: 5px;
                        font-size: 15px;
                        // height: 10px;
                        // border: 1px solid red;
                        >span{
                            font-size: 10px;
                            color: red;
                            border: 1px solid #4f89b3;
                            border-radius: 10px;
                            color: #4f89b3;
                            text-align: center;
                            // display: block;
                            transform: scale(.9);
                            margin-left: 5px;
                            display: inline-block;
                            padding:0 4px;
                        }
                    }
                    .comment{
                        font-size: 15px;
                        margin-top: 5px;
                        word-break: break-all;
                        // text-overflow:ellipsis;
                        // overflow: hidden;
                        word-wrap:break-word;
                        line-height: 25px;
                         text-align: justify;
                         padding: 4px 5px;
                        max-height: 200px;
                       display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 8;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }
                    .recovery{
                        overflow: hidden;
                        margin-top: 10px;
                        span{
                            font-size: 10px;
                            &:nth-child(1){
                                color: #666;
                            }
                             &:nth-child(2){
                                 box-sizing: border-box;
                                color: #5a7cab;
                                margin-left: 5px;
                                border: 1px solid #5a7cab;
                                padding: 2px 3px; 
                                border-radius: 7px;
                                background-color: #eef1f6;
                            
                            }
                        }
                    }

                }
            }
        }
        
        
        
    }
</style>